<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons/common1 :: head(~{::title})">
    <title>关于我</title>
</head>
<body>
    <!--导航开始--------------------------------------------->
    <nav th:replace="commons/common1 :: menu(5)"></nav>
    <!--导航结束---------------------------------------------->


    <!--中间内容开始------------------------------------------>
    <div class="m-container m-padded-large">
        <div class="ui container">
            <div class="ui stackable grid">
                <div class="eleven wide column">
                    <div class="ui teal segment">
                        <img th:src="@{/images/me.jpg}" alt="" class="ui rounded image" />
                    </div>
                </div>
                <div class="five wide column">
                    <div class="ui top teal attached segment">
                        <div class="ui center aligned header">关于我</div>
                    </div>
                    <div class="ui attached segment">
                        <p class="m-text">QIUYANG，广西科技大学，一个编程的爱好者,广西科技大学，一个编程的爱好者,广西科技大学，一个编程的爱好者</p>
                        <p class="m-text">QIUYANG，广西科技大学，一个编程的爱好者</p>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui orange left pointing basic label m-margin-bottom-small">编程</div>
                        <div class="ui orange left pointing basic label m-margin-bottom-small">编程</div>
                        <div class="ui orange left pointing basic label m-margin-bottom-small">编程</div>
                        <div class="ui orange left pointing basic label m-margin-bottom-small">编程</div>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui teal left pointing basic label m-margin-bottom-small">java</div>
                        <div class="ui teal left pointing basic label m-margin-bottom-small">python</div>
                        <div class="ui teal left pointing basic label m-margin-bottom-small">springboot</div>
                        <div class="ui teal left pointing basic label m-margin-bottom-small">spring</div>
                        <div class="ui teal left pointing basic label m-margin-bottom-small">mysql</div>
                        <div class="ui teal left pointing basic label m-margin-bottom-small">springmvc</div>
                        <div class="ui teal left pointing basic label m-margin-bottom-small">mybatis</div>
                        <div class="ui teal left pointing basic label m-margin-bottom-small">shiro</div>
                    </div>
                    <div class="ui buttom attached segment">
                        <a href="#" class="ui circular icon buttom m-margin-left-small"><i class="github icon"></i></a>
                        <a href="#" class="ui wechat circular icon buttom m-margin-left-small"><i class="weixin icon"></i></a>
                        <a href="#" class="ui qq circular icon buttom m-margin-left-small" data-content="1916339974" data-position="bottom center"><i class="qq icon"></i></a>
                    </div>
                    <div class="ui wechatQR flowing popup transition hidden">
                        <img th:src="@{/images/wechat.png}" class="ui rounded image" style="width: 100px" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--中间内容结束------------------------------------------>
    <br>


    <!--底部内容开始-->
    <footer th:replace="commons/common1 :: footer"></footer>
    <!--底部内容结束------------------------------------------>

    <script th:replace="commons/common1 :: script"></script>
<script>
    $('.m-menu.m-toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.wechat').popup({
       popup : $('.wechatQR'),
        on : 'hover',
        position: 'bottom center'
    });
    $('.qq').popup();
    

</script>
</body>
</html>